<!--
 * @Description: 
 * @Date: 2023-03-29 10:08:06
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 10:47:23
-->
<template>
	<div class="tool-right">
		<div v-if="breakPoint != 'xs'" class="ipt-box">
			<IEpSearch v-show="!showIpt" @click="showIpt = true" />
			<el-input v-show="showIpt" ref="iptRef" class="ipt" placeholder="请输入搜索内容">
				<template #prefix>
					<IEpSearch />
				</template>
			</el-input>
		</div>

		<Language :color="color" />

		<Menu v-if="breakPoint == 'xs'" :color="color" />
		<Avatar v-if="breakPoint != 'xs'" class="avatar" :color="color" />
	</div>
</template>
<script setup lang="ts" name="ToolRight">
import { useBaseStore } from "@/store/base";
import { InputInstance } from "element-plus";

// 组件接口
export interface IToolRight {
	color?: string; //组件颜色(非必传) 默认白色
}

const { breakPoint } = storeToRefs(useBaseStore());

// 设置默认props
const props = withDefaults(defineProps<IToolRight>(), {
	color: "#ffffff"
});

// 输入框
const iptRef = ref<InputInstance>();
// 是否显示输入框
const showIpt = ref(false);
</script>
<style lang="scss" scoped>
.tool-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 24px;

	// width: 26%;
	color: v-bind("props.color");
	.ipt-box {
		display: flex;
		align-items: center;
		margin-right: 12px;
		.ipt {
			width: 300px;
		}
	}
}
</style>
